<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('header') %>
        <%- include('menu') %>


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>订单管理</legend>
                </fieldset>

                <form name="form1" class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入订单号" name="number" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
                </form>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询数据</button>
                  </div>
                </script>

                <script type="text/html" id="opdiv">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                    <!--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">取消订单</a>-->
                </script>

            </div>
        </div>


        <%- include('footer') %>
    </div>
    <%- include('script') %>

    <script>
        var table;
        var vm = new Vue({
            el: '#app',
            mounted: function () {
                layui.use(['element', "table", 'form', 'laytpl'], function () {

                    var laydate = layui.laydate,
                        form = layui.form,
                        laytpl = layui.laytpl,
                        element = layui.element;
                    table = layui.table

                    table.render({
                        elem: "#tablediv",
                        url: "/admin/order",
                        toolbar: '#toolbar',
                        cols: [
                            [
                                {
                                    field: "number",
                                    title: "订单号",
                                    minWidth: 100,
                                    sort: true
                                },
                                {
                                    field: "realname",
                                    title: "订单人",
                                    // minWidth: 150,
                                    sort: true
                                },
                                {
                                    field: "phone",
                                    title: "联系手机",
                                    // minWidth: 80,
                                },
                                {
                                    field: "province",
                                    minWidth: 300,
                                    title: "订单地址",
                                    templet:function (d) {
                                        return d.province + '  ' + d.address
                                    }
                                },
                                {
                                    field: "status",
                                    title: "当前状态",
                                    sort: true,
                                    templet:function (d) {
                                        str = '';
//
                                        switch (d.status) {
                                            case '0':
                                                str = '已付款';break;
                                            case '1':
                                                str = '已分配门店';break;
                                            case '2':
                                                str = '已分配业务员';break;
                                            case '3':
                                                str = '业务员已取衣';break;
                                            case '4':
                                                str = '业务员正在送洗';break;
                                            case '5':
                                                str = '已送达中心';break;
                                            case '6':
                                                str = '中心清洗中';break;
                                            case '7':
                                                str = '已上挂';break;
                                            case '8':
                                                str = '业务员已领取';break;
                                            case '9':
                                                str = '业务员已取回';break;
                                            case '10':
                                                str = '等待取衣';break;
                                            case '11':
                                                str = '已确认';break;
                                            case '12':
                                                str = '已结束';break;
                                            case '13':
                                                str = '已取消';break;
                                        }
                                        return str;
                                    }
                                },
                                {
                                    field: "is_complaint",
                                    title: "处理状态",
                                    sort: true,
                                    templet:function (d) {
                                        str = '';
                                        if(d.is_complaint == '1')
                                            str = '投诉中';
                                        if(d.is_complaint == '2')
                                            str = '已处理';
                                        if(d.is_complaint == '0')
                                            str = '未投诉';
                                        return str;
                                    }
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    toolbar: '#opdiv',
                                    minWidth: 150
                                }
                            ]
                        ],
                        page: true,
                    });

                    table.on('tool(tablediv)', function (obj) {

                        var data = obj.data;

                        if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/order/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        } else if (obj.event === 'del') {
                            layer.confirm('真的强制取消此订单吗？', function (index) {
                                $.ajax({
                                    url:'/admin/order/'+data.id,
                                    type:'Delete',
                                    data:{},
                                    success:(res)=>{
                                        if(res.code === 200){
                                            layer.close(index);
                                            layer.msg('取消成功！',{icon:1});
                                            table.reload('tablediv',{
                                                where:{}
                                            });
                                        }else{
                                            layer.msg('取消失败：'+res.error+' -- '+res.code,{icon:2});
                                        }
                                    }
                                });
                            });
                        }
                    });

                    //查询按钮
                    form.on('submit(search)', function (data) {
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                number: data.field.number,
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                })
            },
            methods: {
                iframeclose: function () {
                },
                iframesave: function () {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                iframeupdate: function () {
                    table.reload('tablediv', {
                    });
                }
            }
        })
    </script>
</body>

</html>
